Y9 - SU1.4 - Navigation and Refining Content

⏱️ Do It Now

Create a OneNote Page and copy this into the title:

Lesson 4 - Summer 1 - Navigation and Refining Content

Copy this into a OneNote Page and complete it

📝 Do It Now

Answer each of the following:

(1) Explain the difference between HTML and CSS

(2) Explain the difference between <p> and </p>
Why are both needed?

(3) Explain what each part of this tag is for
<img src="images/imageName.png" width="200px">

Extension Question: Research what a horizontal rule is and why you might use one

🎯 Learning Objectives

LO1: Create a multi-page website connected by a navigation menu
LO2: Style an effective navigation menu
LO3: Continue to update the content of the website

📖 Everybody Reads

What you will achieve

By the end of this lesson you will have a multi-page website.

Each page will be linked to the others by a navigation menu just like this ⬇️

Home Types Locations Problems

Go to next slide ➡️➡️

🎥 (1) Create Multiple Pages

Work with the video below to set up multiple pages on your site.

You don't need to complete all of them but you do need them for the navigation menu to work.

VSCODE - MAKE MULTIPLE PAGES

Click for page template code

<!DOCTYPE html>

<html>
    <head>
        <title>My Website</title>
        <link rel="stylesheet" href="styles.css" />
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
 
<!-- Content Goes here! -->
    
    </body>
</html>

Go to next slide ➡️➡️

🎥 (2) Create A Navigation Menu

Work with the video below to create a navigation menu on your site.

For this to work you must have created all of the pages first.

VSCODE - MAKE A NAVIGATION MENU

Go to next slide ➡️➡️

🎥 (3) Style Your Navigation Menu

Work with the video below to style the navigation menu on your site.

VSCODE - STYLING A NAVIGATION MENU

Go to next slide ➡️➡️

🎥 (4) Publishing and Viewing Your Site

Work with the video below to publish your website so you can view it live.

This will also allow you to test if your navigation menu works.

VSCODE - PUBLISHING AND VIEWING YOUR WEBSITE

Go to next slide ➡️➡️

👩‍🎨 Updating and Refining Your Content

Over the next few slides you will see code segments that you can use on each of your pages.

You won't have to use all of them, but it is important for you to have the choice.

Go to next slide ➡️➡️

👩‍🎨 (1) Key HTML Tags

The tags below can all be used to structure your webpages


<h1> Content for Main Heading </h1>
<h2> Content for Subheading </h2>
<p> Content for a paragraph </p>
<img src"images/someImage.png" width="100%" >
<hr> -- Is used to create a horizontal rule(line) between sections of a page.
<br> -- Is used to create a line break (new line)

Go to next slide ➡️➡️

👩‍🎨 (2) Adding Images From Google To A Site

Watch This video to see how an image from Google can be added to your webpage

Go to next slide ➡️➡️

👩‍🎨 (3) Image Border and Rounded Edges

You can add borders and rounded edges to images.

Use this code for an image tag


<img src="images/button-moon.png"
style=
"
width:200px;
border:8px solid red;
border-radius:100px;
"
>

The style attribute is basically CSS but you can add it inside the image tag instead of on the stylesheet.

Go to next slide ➡️➡️

👩‍🎨 (4) Using a Flex Box

Anything you put within a flex box will appear side by side

Button moon was a popular children's television series during the mid 1980s. It featured a whole host of characters on the moon!

The code for this


<div style="
display:flex;
width:50%;
border:5px solid blue;
padding:5px;
background-color:grey;
border-radius:20px;
">

<!-- Put your content here -->

</div>

CSS

Some Useful Examples of CSS

h1{
    color:green;
    font-family:'Gill Sans', 'Gill Sans MT';
}



body{
    background-color:#00ff00;
}



h2{
    color:green;
    font-family:'Gill Sans', 'Gill Sans MT';
}



p{
   color:green;
    font-family:'Gill Sans', 'Gill Sans MT';
}